<template>
    <div class="user banxin">
        <div class="user_in">
            <!-- 用户信息 -->
            <div class="user_t">
                <div class="header">
                    <img :src="profile.avatarUrl" alt="">
                    <i class="mask"></i>
                </div>
                <div class="info">
                    <div class="title">
                        <div class="name">
                            <div class="name_l">
                                <h2>{{ profile.nickname }}</h2>
                                <div class="leve">
                                    <span>{{ userData.level }}</span>
                                </div>
                                <i :class="{'male':profile.gender==1}"></i>
                                <i :class="{'female':profile.gender==0}"></i>
                                <div class="emil" v-show="this.id==2081534865?false:true">
                                    <span>发私信</span>
                                </div>
                                <div class="watch" v-show="this.id==2081534865?false:true">
                                    <span>关注</span>
                                </div>
                            </div>
                            <div class="btn" @click="logOut" v-show="this.id==2081534865?true:false">
                                <div class="btn_l">
                                    <span>退出登录</span>
                                </div>
                                <div class="btn_r"></div>
                            </div>
                        </div>
                        <p class="tag">
                            <i class="star" v-show="profile.artistIdentity==0?false:true"></i>
                            <span v-for="(item, index) in profile.allAuthTypes" :key="index">
                                {{ item.desc }}
                            </span>
                        </p>
                    </div>
                    <ul class="tab-box">
                        <li>
                            <strong>{{ profile.eventCount }}</strong>
                            <span>动态</span>
                        </li>
                        <li>
                            <strong>{{ profile.follows }}</strong>
                            <span>关注</span>
                        </li>
                        <li>
                            <strong>{{ profile.followeds }}</strong>
                            <span>粉丝</span>
                        </li>
                    </ul>
                    <div class="inf" v-show="profile.signature!=''">
                        个人介绍：{{ profile.signature }}
                    </div>
                    <div class="inf">
                        出生日期：{{ profile.birthday | showDate }}
                    </div>
                    <div class="inf" v-if="profile.city!==100 & profile.province!==1000000">
                        所在地区：{{ [profile.province, profile.city] | showPlace }}
                    </div>
                    <div class="inf" v-else-if="profile.city==100">
                        所在地区：台北市
                    </div>
                    <div class="inf" v-else-if="profile.province==1000000">
                        所在地区：海外
                    </div>
                </div>
            </div>
            <!-- 标题 -->
            <div class="titles tanxin" v-show="djRadios.length!=0">
                <h2>{{ profile.nickname }}创建的电台（{{ djRadios.length }}）</h2>
            </div>
            <!-- 电台列表 -->
            <table>
                <tr v-for="(item, index) in djRadios" :key="index">
                    <td class="col1">
                        <img :src="item.picUrl" alt="" @click="$router.push(`/djradio/${item.id}`)">
                    </td>
                    <td class="col2">
                        <a @click="$router.push(`/djradio/${item.id}`)">{{ item.name }}</a>
                    </td>
                    <td class="col3">
                        <div class="show">
                            <a title="分享" class="a3"></a>
                        </div>
                    </td>
                    <td class="col4">
                        订阅{{ item.subCount }}次
                    </td>
                    <td class="col5">
                        {{ item.programCount }}期
                    </td>
                </tr>
            </table>
            <!-- 标题 -->
            <div class="titles tanxin" v-show="createList.length!=0">
                <h2>{{ profile.nickname }}创建的歌单（{{ createList.length }}）</h2>
            </div>
            <!-- 歌单列表 -->
            <div class="song_list">
                <ul class="tanxin">
                    <li v-for="(item, index) in createList" :key="index" @click="$router.push(`/playlist/${item.id}`)">
                        <div class="info">
                            <img :src="item.coverImgUrl">
                            <i class="cover"></i>
                            <i :class="{'vip':item.highQuality}" ></i>
                            <div class="listen tanxin">
                                <span>
                                    <i class="headset"></i>
                                    {{ item.trackCount }}万
                                </span>
                                <i class="play"></i>
                            </div>
                        </div>
                        <p class="ellipsis">{{ item.name }}</p>
                    </li>       
                </ul>
            </div>
            <!-- 标题 -->
            <div class="titles tanxin" v-show="subList.length!=0">
                <h2>{{ profile.nickname }}收藏的歌单（{{ subList.length }}）</h2>
            </div>
            <!-- 歌单列表 -->
            <div class="song_list">
                <ul class="tanxin">
                    <li v-for="(item, index) in subList" :key="index" @click="$router.push(`/playlist/${item.id}`)">
                        <div class="info">
                            <img :src="item.coverImgUrl">
                            <i class="cover"></i>
                            <i :class="{'vip':item.highQuality}" ></i>
                            <div class="listen tanxin">
                                <span>
                                    <i class="headset"></i>
                                    {{ item.trackCount }}万
                                </span>
                                <i class="play"></i>
                            </div>
                        </div>
                        <p class="ellipsis">{{ item.name }}</p>
                    </li>       
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import { UserDetailApi, reqUserPlayList, UserAudioApi } from '@/request/api';
import { formatDate } from '@/assets/utils/date';
import { regionData, CodeToText} from "element-china-area-data"
export default {
    data () {
        return {
            userData: "",
            profile: "",
            playList: [],
            createList: [],
            subList: [],
            djRadios: [],
        }
    },
    computed: {
        id() {
            return this.$route.params.id;
        }
    },
    filters: {
        showDate: function(value) {
            let date = new Date(value);
            // return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
            return formatDate(date, 'yyyy年MM月dd日');
        },
        showPlace: function(value) {
            //value是省市区类似id 返回数组 [110000,110100,110101]，可以当发到后端存储，回显数据
	        //汉字
            if (value[1] != null && value[2] != null) {
            var dz =
                CodeToText[value[0]] +
                '-' +
                CodeToText[value[1]] +
                '-' +
                CodeToText[value[2]]
            } else if (value[1] != null) {
                dz = CodeToText[value[0]] + '-' + CodeToText[value[1]] 
            } else {
                dz = CodeToText[value[0]]
            }
            return dz
        }
    },
    created() {
        // 获取用户详情
        UserDetailApi(this.id).then((res) => {
            // console.log(res);
            this.userData = res.data;
            this.profile = res.data.profile;
        });
        // 获取用户歌单
        reqUserPlayList(this.id).then((res) => {
            // console.log(res);
            this.playList = res.data.playlist;
            this.createList = this.playList.filter(item=>{
                return item.subscribedCount== 0
            });
            this.subList = this.playList.filter(item=>{
                return item.subscribedCount!= 0
            });
        });
        // 获取用户电台
        UserAudioApi(this.id).then((res) => {
            // console.log(res);
            this.djRadios = res.data.djRadios;
        })
    },
    methods: {
        logOut() {
            // 删除token
            localStorage.clear();
            // 提示
            let obj = { content:"退出登录中...", icon:"success"};
            this.$store.dispatch("AsyncToast", obj);
            setTimeout(() => {
                this.$router.push("/");
                this.$store.commit("isHeaderShow", false);
                this.$store.commit("isLoginShow", false);
            }, 2000)
        },
    }
}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.user_in {
    background-color: #fff;
    border: 1px solid #D7D7D7;
    border-top: 0;
    border-bottom: 0;
    padding: 40px;
    .user_t {
        display: flex;
        margin-bottom: 40px;
        .header {
            position: relative;
            width: 208px;
            height: 208px;
            img {
                width: 208px;
                height: 208px;
            }
            .mask {
                position: absolute;
                top: 0;
                left: 0;
                width: 208px;
                height: 208px;
                display: block;
                background: url("@/assets/images/public/coverall.png") no-repeat 0 -1285px;
            }
        }
        .info {
            margin-left: 40px;
            .title {
                width: 680px;
                padding:  0 0 12px;
                margin: 0 0 10px;
                border-bottom: 1px solid #ddd;
                .name {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .name_l {
                        display: flex;
                    }
                    .btn {
                        display: flex;
                        cursor: pointer;
                        &:hover {
                            .btn_l {
                                width: 85px;
                                height: 31px;
                                display: block;
                                background: url("@/assets/images/public/button2.png") no-repeat;
                                background-position: 0 -141px;
                            }
                            .btn_r {
                                width: 5px;
                                height: 31px;
                                display: block;
                                background: url("@/assets/images/public/button2.png") no-repeat;
                                background-position: -245px -182px;
                            }
                        }
                    }
                }
                h2 {
                    font-size: 22px;
                    color: #000;
                }
                .leve {
                    margin-left: 10px;
                    width: 65px;
                    height: 19px;
                    display: block;
                    background: url("@/assets/images/public/icon2.png") no-repeat -135px -190px;
                    // 文字样式
                    span {
                        display: block;
                        padding: 0 0 0 30px;
                        line-height: 19px;
                        color: #e03a24;
                        font-size: 14px;
                        font-weight: bold;
                        font-style: italic;
                    }
                }
                .male {
                    margin-left: 10px;
                    width: 20px;
                    height: 20px;
                    display: block;
                    background: url("@/assets/images/public/icon.png") no-repeat -41px -57px;
                }
                .female {
                    margin-left: 10px;
                    width: 20px;
                    height: 20px;
                    display: block;
                    background: url("@/assets/images/public/icon.png") no-repeat -41px -27px;
                }
                .emil {
                    margin-left: 15px;
                    width: 75px;
                    height: 31px;
                    display: block;
                    background: url("@/assets/images/public/button.png") no-repeat;
                    background-position: 0 -810px;
                    &:hover {
                        cursor: pointer;
                        background-position: 0 -845px;
                    }
                    span {
                        display: block;
                        line-height: 31px;
                        padding: 0 0 0 30px;
                        font-size: 12px;
                        color: #333;
                    }
                }
                .watch {
                    margin-left: 15px;
                    width: 70px;
                    height: 31px;
                    display: block;
                    background: url("@/assets/images/public/button.png") no-repeat;
                    background-position: 0 -720px;
                    &:hover {
                        cursor: pointer;
                        background-position: -80px -720px;
                    }
                    span {
                        display: block;
                        line-height: 31px;
                        font-size: 12px;
                        color: #fff;
                        padding: 0 0 0 30px;
                    }
                }
                .btn_l {
                    width: 85px;
                    height: 31px;
                    display: block;
                    background: url("@/assets/images/public/button2.png") no-repeat;
                    background-position: 0 -59px;
                    span {
                        line-height: 31px;
                        font-size: 12px;
                        color: #333;
                        padding: 0 0 0 20px;
                    }
                }
                .btn_r {
                    width: 5px;
                    height: 31px;
                    display: block;
                    background: url("@/assets/images/public/button2.png") no-repeat;
                    background-position: -245px -100px;
                }
                .tag {
                    margin: 8px 0 0;
                    display: flex;
                    align-items: center;
                    i {
                        width: 68px;
                        height: 20px;
                        display: block;
                        background: url("@/assets/images/public/icon2.png") no-repeat -75px -480px;
                        margin: 0 6px 0 0;
                    }
                    span {
                        font-size: 14px;
                        color: #666;
                        border-right: 1px solid #ddd;
                        padding: 0 10px;
                        &:nth-last-of-type(2) {
                            border-right: 0;
                        }
                    }
                }
            }
            .tab-box {
                display: flex;
                margin-bottom: 15px;
                li {
                    height: 41px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    border-left: 1px solid #ddd;
                    padding: 0 40px 0 20px;
                    &:first-of-type {
                        border: 0;
                        padding-left: 0;
                    }
                    strong {
                        color: #666;
                        font-size: 24px;
                    }
                    span {
                        color: #666;
                        font-size: 12px;
                    }
                }
            }
            .inf {
                line-height: 21px;
                font-size: 12px;
                color: #666;
                margin: 0 0 5px;
                span {
                    margin: 0 0 0 20px;
                    &:first-of-type {
                        margin: 0;
                    }
                }
            }
        }
    }
    .titles {
        height: 40px;
        width: 100%;
        border-bottom: 2px solid @red;
        display: flex;
        align-items: center;
        h2 {
            font-size: 20px;
            color: #333;
            cursor: pointer;
            &:hover {
                text-decoration: underline;
            }
        }
    }
    table {
        border: 1px solid #d9d9d9;
        border-top: 0;
        width: 100%;
        margin: 0 0 20px;
        tr {
            padding: 10px 0;
            height: 50px;
            display: flex;
            align-items: center;
            font-size: 12px;
            &:nth-of-type(even) {
                background: #f7f7f7;
            }
            &:nth-of-type(odd) {
                background: #fff;
            }
            &:hover .show {
                display: block !important;
            }
            &:hover {
                background-color: #f1f1f1;
            }
        }
        td {
            height: 50px;
            line-height: 50px;
        }
        .col1 {
            width: 50px;
            padding: 0 0 0 20px;
            img {
                width: 50px;
                height: 50px;
            }
        }
        .col2 {
            width: 500px;
            margin: 0 0 0 10px;
            a {
                font-size: 12px;
                color: #333;
                &:hover {
                    cursor: pointer;
                    text-decoration: underline;
                }
            }
        }
        .col3 {
            width: 25px;
                display: flex;
                align-items: center;
            .show {
                width: 25px;
                height: 18px;
                display: flex;
                display: none;
                a {
                  margin: 2px 5px 0 0;
                  width: 18px;
                  height: 16px;
                  display: block;
                  float: left;
                  background: url("../assets/images/public/table.png") no-repeat;
                  &:hover {
                    cursor: pointer;
                  }
                }
                .a3 {
                    background-position: 0 -195px;
                    &:hover {
                      background-position: -20px -195px;
                    }
                }
            }
        }
        .col4 {
            margin: 0 0 0 10px;
            width: 250px;
            color: #666;
        }
        .col5 {
            margin: 0 0 0 10px;
            width: 40px;
            color: #999;
        }
    }
    .song_list {
        margin-top: 20px;
        ul {
            flex-wrap: wrap;
            display: flex;
            justify-content: flex-start !important;
            li {
                cursor: pointer;
                width: 140px;
                height: 190px;
                padding: 0 54px 10px 0;
                &:nth-of-type(5n) {
                    padding-right: 0;
                }
            }
            .info {
                position: relative;
                img {
                    width: 140px;
                    height: 140px;
                }
                .cover {
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 140px;
                    width: 140px;
                    background: url("@/assets/images/public/coverall.png") no-repeat 0px 0px;
                }
                .vip {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 40px;
                    height: 40px;
                    display: block;
                    background: url("@/assets/images/public/icon2.png") no-repeat -135px -220px;
                }
                .listen {
                    width: 100%;
                    height: 27px;
                    background-color: rgba(0, 0, 0, 0.5);
                    position: absolute;
                    bottom: 0;
                    left: 0;
                }
                span {
                    color: #ccc;
                    font-size: 12px;
                    line-height: 27px;
                    text-align: center;
                }
                .headset {
                    float: left;
                    width: 17px;
                    height: 17px;
                    margin: 2px 5px;
                    background: url("@/assets/images/public/iconall.png") no-repeat -0px -18px;
                }
                .play {
                    float: left;
                    width: 17px;
                    height: 17px;
                    margin: 4px 8px;
                    background: url("@/assets/images/public/iconall.png") no-repeat -0px -0px;
                    &:hover {
                        background-position: 0 -60px;
                        cursor: pointer;
                    }
                }
            }
            p {
                font-size: 14px;
                line-height: 1.4;
                color: #000;
                margin-top: 8px;
                display: list-item;
                text-align: -webkit-match-parent;
                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}
</style>